<template>
  <div id="sales-wait-check-order">
    <div class="search-box">
        <el-form>
             <el-form-item label="店铺名称：">
                <el-select v-model="searchForm.shopId" placeholder="请选择店铺" size="small" filterable :filter-method="dataFilter" clearable>
                  <el-option v-for="(item, index) in shopNameList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="计划ID：">
               <el-input placeholder="请输入计划ID" v-model="searchForm.planCode" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="任务ID：">
               <el-input placeholder="请输入任务ID" v-model="searchForm.taskCode" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="商品ID：">
               <el-input placeholder="请输入商品ID" v-model="searchForm.productId" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="推手账号：">
               <el-input placeholder="请输入推手账号" v-model="searchForm.account" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="付款金额：">
               <el-input placeholder="请输入付款金额" v-model="searchForm.payMoney" size="small" clearable></el-input>
             </el-form-item>
            <el-form-item>
                <el-button class="search-btn" icon="el-icon-ali-search" @click="searchData">查&nbsp;询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="reset-btn" icon="el-icon-ali-reset" @click="resetSearchParam">重&nbsp;置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
      <div class="table-header-box">
        <el-button class="search-btn" icon="el-icon-ali-look" @click="showInquireOrder">手动查询订单</el-button>
        <div class="tips">{{systemTips}}</div>
      </div>
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="platform_type" label="店铺类型/店铺名称">
          <div slot-scope="scope">
           <div class="textColor">{{getShopType(scope.row)}}</div>
           <div>{{scope.row.shop_name}}</div>
          </div>
        </el-table-column>
        <el-table-column width="120px" prop="goods_img" label="商品主图">
          <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.goods_img">
            <img class="goods-preview-img" :src="scope.row.goods_img"/>
            <img slot="reference" :src="scope.row.goods_img"  style="width: 80px;height: 80px">
          </el-popover>
        </el-table-column>
        <el-table-column prop="tb_name" label="推手账号/订单号">
          <div slot-scope="scope">
              <div class="textColor">{{scope.row.tb_name}}</div>
              <div style="color: #ee7b5a;">{{scope.row.order_num ? scope.row.order_num : '--'}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="product_id" label="商品ID"></el-table-column>
        <el-table-column prop="all_pay_money" label="应付金额/推手填写金额">
          <div slot-scope="scope">
           <div class="textColor">{{scope.row.all_pay_money}}</div>
           <div style="color: #ee7b5a;">{{scope.row.other_pay}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="over_time" label="提交任务时间" :formatter="changeOverTimeType"></el-table-column>
        <el-table-column prop="plan_code" label="计划ID/任务ID">
          <div slot-scope="scope">
             <div class="planCodeStyle" @click="toPlanDetailPage(scope.row.plan_id, scope.row)">{{scope.row.plan_code}}</div>
             <div>{{scope.row.task_code}}</div>
          </div>
        </el-table-column>
        <el-table-column label="操作" class-name="shenghe">
          <template slot-scope="scope">
            <el-button class="check-btn" v-if="getCheckType(scope.row)" size="mini" @click="checkOrder(scope.$index, scope.row)">人工审核</el-button>
            <div v-else>自动审核中</div>
             <el-button class="appeal-btn"  v-if="scope.row.appeal_status==4"  size="mini" @click="openAppealOrder(scope.row)">申诉</el-button>
             <div v-else>{{appealStatus[scope.row.appeal_status]}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="allTableData" id="exportTable" v-show="false" border>
        <el-table-column prop="shop_type" label="店铺类型" :formatter="getShopType"></el-table-column>
        <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
        <el-table-column prop="tb_name" label="推手账号"></el-table-column>
        <el-table-column prop="product_id" label="商品ID"></el-table-column>
        <el-table-column prop="order_num" label="提交订单号"></el-table-column>
        <el-table-column prop="all_pay_money" label="应付金额"></el-table-column>
         <el-table-column prop="other_pay" label="推手填写金额"></el-table-column>
        <el-table-column prop="over_time" label="提交任务时间" :formatter="changeOverTimeType"></el-table-column>
        <el-table-column prop="task_code" label="任务ID"></el-table-column>
        <el-table-column prop="plan_code" label="计划ID"></el-table-column>
        <el-table-column label="操作" class-name="shenghe">
          <template slot-scope="scope">
            <el-button class="check-btn" v-if="getCheckType(scope.row)" size="mini">人工审核</el-button>
            <div v-else>自动审核中</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-footer">
        <el-button icon="el-icon-download" class="download-btn" @click="downloadExcel">导出</el-button>
        <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="searchForm.pageSize" :current-page="searchForm.page" layout="total, sizes, prev, pager, next, jumper"
          :total="pageToatal" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
     <v-appeal :appealForm="appealForm" @closeDialog="closeAppealDialog" @confrimAppeal="confrimAppeal" v-if="showAppealDialog"></v-appeal>
    <el-dialog title="人工审核" :visible.sync="isShowCheckDialog"  width="1200px" class="dialog-style check-dialog">
        <div class="order-info">
          <el-table :data="checkOrderData" border>
            <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
            <el-table-column prop="tb_name" label="推手账号"></el-table-column>
            <el-table-column prop="product_id" label="商品ID"></el-table-column>
            <el-table-column prop="task_code" label="任务ID"></el-table-column>
            <el-table-column prop="all_pay_money" width="80px" label="应付金额"></el-table-column>
            <el-table-column prop="other_pay" width="120px" label="推手填写金额"></el-table-column>
            <el-table-column prop="pay_img" label="付款截图">
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.pay_img">
                <img class="pay-money-preview-img" :src="scope.row.pay_img"/>
                <img slot="reference" :src="scope.row.pay_img"  style="width: 80px;height: 80px">
              </el-popover>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="over_time" label="提交任务时间" :formatter="changeOverTimeType"></el-table-column>
          </el-table>
          <div class="opt-box">
            <el-form>
              <el-form-item label="操作 :" >
                <el-radio-group class="radio-box" v-model="checkForm.status">
                  <el-radio :label="1">成功</el-radio>
                  <el-radio :label="2">失败</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="checkForm.status == 1">
                <div class="tips">注：找到推手真实下单的订单号和实际付款金额写入，系统会按照实际付款金额结算</div>
                <el-form-item label="订单号:"prop="orderNum">
                   <el-input v-model="checkForm.orderNum" placeholder="请输入订单号" />
                </el-form-item>
                <el-form-item label="实付金额:" prop="realPay">
                   <el-input v-model="checkForm.realPay" placeholder="请输入实付金额"/>
                </el-form-item>
                <el-form-item label="实付佣金:" prop="realCommission" v-if="checkForm.customize_whether == 2">
                  <el-input v-model="checkForm.realCommission" placeholder="请输入实付佣金"/>
                </el-form-item>
                <el-form-item label="下单时间:" prop="buyTime">
                   <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" v-model="checkForm.buyTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
              </div>
              <div v-else>
                <el-form-item label="失败原因" prop="remark" size="medium">
                   <el-input type="textarea" class="textarea" rows="5"  v-model="checkForm.remark" placeholder="请输入失败原因"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel-btn" @click="isShowCheckDialog = false">取消</el-button>
          <el-button class="submit-btn" :loading="submitLoading" :disabled="submitLoading" @click="submitCheckOrder">确认</el-button>
        </div>
    </el-dialog>
    <el-dialog class="inquire-order-dialog" title="查询订单" :visible.sync="isShowInquireOrderDialog"  width="1000px" style="height: 600px;">
      <el-form  :model="orderForm" :inline="true">
        <el-form-item label="订单号/买家淘宝号 ：">
          <el-input placeholder="请输入订单号/买家淘宝号(仅限简略网授权)" v-model="orderForm.tbNameOrOrderNo" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="店铺名称 ：">
          <el-select v-model="orderForm.shopId" placeholder="请选择店铺" size="small" filterable :filter-method="dataFilter" clearable>
            <el-option v-for="(item, index) in shopNameList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
           <el-button class="filter-btn" @click="inquireOrder()">查&nbsp;&nbsp;询</el-button>
        </el-form-item>
        <div style="color: red;">授权过期时间:{{expires}}</div>
        <el-table :data="orderTableData" border>
          <el-table-column prop="order_no" label="订单号"></el-table-column>
          <el-table-column prop="true_pay" label="实付"></el-table-column>
          <el-table-column prop="buy_time" label="下单时间"></el-table-column>
          <el-table-column prop="tb_name" label="买家淘宝号"></el-table-column>
          <el-table-column prop="product_id" label="淘宝下单商品ID">
            <div slot-scope="scope">
              <div :class="scope.row.product_id == scope.row.origin_product_id ? '':'colorText'">{{scope.row.product_id}}</div>
            </div>
          </el-table-column>
          <el-table-column prop="origin_product_id" label="任务要求的商品ID"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
         </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiGetMerchantShopList,
  apiNotCheckSaleTaskList,
  apiSubmitSaleCheck,
  apiQueryOrder, apiSubmitSaleCheckTiktok
} from '../../request/api.js'
  import { mapGetters,mapActions } from 'vuex';
  import vAppeal from '../../components/createAppeal.vue'
  export default{
    components: {
       vAppeal
    },
    data(){
      return {
        searchForm:{
          token: '',
          page: 1,
          pageSize: 10,
          shopId: '',
          productId: '',
          planCode: '',
          taskCode: '',
          startTime: '',
          endTime: '',
          account: '',
          payMoney: '',
          shopType: ''
        },
        searchTime: [],
        shopNameList: [],
        shopNameOptions: [],
        platformNameObject:{
          1: '淘宝',
          2: '天猫',
          3: '京东',
		  4: '1688',
          13: '唯品会',
          15: '拼多多'
        },
        pageToatal: 0,
        tableData: [],
        allTableData: [],
        isShowCheckDialog: false,
        checkForm: {
          id: '',
          orderNum: '',
          realPay: '',
          buyTime: '',
          remark: '',
          token: '',
          payImg:'',
          otherPay: '',
          status: 1,
          realCommission: ""
        },
        checkOrderData: [],
        submitLoading: false,
        isShowInquireOrderDialog: false,
        orderForm: {
          token: '',
          shopId: '',
          tbNameOrOrderNo: ''
        },
        orderTableData: [],
        expires: '',
        showAppealDialog: false,
        appealForm: {},
        appealStatus: {
          1: '申诉已提交',
          2: '申诉正在处理',
          3: '申诉已完成'
        },
        systemTips: '',
        userToken: window.localStorage.getItem('token')
      }
    },
    created() {
      this.searchForm.token = this.userToken
      this.searchForm.shopType = this.platformType
      this.getShopList()
      this.getTableData()
    },
    computed:{
      ...mapGetters(['platformType']),
    },
    watch: {
      platformType: function (val) {
        this.searchForm.shopType = val
        this.getTableData()
      }
    },
    methods:{
       dataFilter(val) {
         this.searchForm.shopId = val;
         if (val) { //val存在
           this.shopNameList = this.shopNameOptions.filter((item) => {
             if (!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {
               return true
             }
           })
         } else { //val为空时，还原数组
           this.shopNameList = this.shopNameOptions;
         }
       },
       getShopList() {
         this.$isClick(true);
         apiGetMerchantShopList({
           token: this.userToken
         }).then(res =>{
           this.$isClick(false);
            if (res.code == 1){
             for (var i in res.msg.merchant_shop_list) {
               this.shopNameOptions.push({
                 name: this.platformNameObject[res.msg.merchant_shop_list[i].type] + '-' + res.msg.merchant_shop_list[i].name,
                 id: res.msg.merchant_shop_list[i].id
               })
             }
              this.shopNameList = this.shopNameOptions
            } else {
              this.$message.error(res.msg);
            }
         }).catch(res => {
           this.$isClick(false);
             this.$message.error(res.msg)
         })
       },
       getTableData(){
         this.$isClick(true);
          apiNotCheckSaleTaskList(this.searchForm).then(res =>{
            this.$isClick(false);
             if (res.code == 1){
              this.tableData = res.msg.res
              this.pageToatal = res.msg.allNum
              this.systemTips = res.msg.tip
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              this.$message.error(res.msg)
          })
       },
       checkOrder(index, row){
         var now = new Date();
         this.checkForm = {
           id: row.id,
           orderNum: row.order_num || '',
           realPay: '',
           buyTime: now.getTime(),
           remark: '',
           status: 1,
           otherPay: row.other_pay,
           payImg: row.pay_img,
           token: this.userToken,
           shopType: row.shop_type,
           realCommission: 0,
           customize_whether: row.customize_whether
         }
         this.isShowCheckDialog = true
         this.checkOrderData = []
         this.checkOrderData.push(row);
       },
       submitCheckOrder(){
          if (this.checkForm.status == 1) {
            if (this.checkForm.orderNum == '') {
               this.$message.error('请输入订单号');
               return
            }
            if (this.checkForm.time == '') {
              return this.$message.error('请选择下单时间');
            }
            if (this.checkForm.realPay == '') {
              return this.$message.error('请输入实付金额');
            }
            if ((this.checkForm.customize_whether == 2) && (this.checkForm.realCommission === '')) {
              return this.$message.error('请输入实付佣金');
            }
            var str = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if (!str.test(this.checkForm.realPay)) {
            	return this.$message.error('金额格式不对');
            }
            if(this.checkForm.realPay - this.checkOrderData[0].all_pay_money > 200){
              // return this.$message.error('实际付款金额比应付款金额不能大于200');
              this.$confirm('实际付款金额比应付款金额不能大于200', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
               this.confirmFun()
              }).catch(() => {
                return
              });
            } else {
              this.confirmFun()
            }
          } else{
            if (this.checkForm.reason == '') {
              return this.$message.error('请输入失败原因');
            }
            this.confirmFun()
          }
       },
       confirmFun(){
         if (this.checkForm.shopType == 20) {
           this.submitLoading = true;
           apiSubmitSaleCheckTiktok({
             id: this.checkForm.id,
             orderNum: this.checkForm.orderNum,
             realPay: this.checkForm.realPay,
             buyTime: this.checkForm.buyTime / 1000,
             remark: this.checkForm.remark,
             status: parseInt(this.checkForm.status),
             token: this.checkForm.token,
             realCommission: this.checkForm.realCommission
           }).then(res => {
             this.submitLoading = false
             if (res.code == 1) {
               this.checkForm = {
                 id: '',
                 orderNum: '',
                 realPay: '',
                 buyTime: '',
                 remark: '',
                 status: 1,
                 payImg: '',
                 otherPay: '',
                 token: this.userToken,
                 realCommission: "",
                 customize_whether: ""
               }
               this.$message.success(res.msg);
               this.getTableData()
               this.isShowCheckDialog = false
             } else {
               this.$message.error(res.msg);
             }
           }).catch(res => {
             this.submitLoading = false
             this.$message.error(res.msg)
           })
           return
         }
         if(this.checkOrderData[0].all_pay_money != this.checkForm.otherPay && this.checkForm.status ==1){
           let content = '应付金额'+ this.checkOrderData[0].all_pay_money+ ',实付金额' + this.checkForm.realPay + ',推手填写金额' + this.checkForm.otherPay + '不一致，是否继续审核成功？'
           this.$confirm(content, '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             this.submitSaleCheck()
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消'
             });
           });
         } else {
           this.submitSaleCheck()
         }
       },
       submitSaleCheck(){
         this.submitLoading = true
         apiSubmitSaleCheck({
          id: this.checkForm.id,
          orderNum: this.checkForm.orderNum,
          realPay: this.checkForm.realPay,
          buyTime: this.checkForm.buyTime / 1000,
          remark: this.checkForm.remark,
          status: parseInt(this.checkForm.status),
          token: this.checkForm.token,
          realCommission: this.checkForm.realCommission
         }).then(res =>{
           this.submitLoading = false
            if (res.code == 1){
             this.checkForm = {
               id: '',
               orderNum: '',
               realPay: '',
               buyTime: '',
               remark: '',
               status: 1,
               payImg: '',
               otherPay: '',
               token: this.userToken,
               realCommission: "",
               customize_whether: ""
             }
             this.$message.success(res.msg);
             this.getTableData()
             this.isShowCheckDialog = false
            } else {
              this.$message.error(res.msg);
            }
         }).catch(res => {
            this.submitLoading = false
            this.$message.error(res.msg)
         })
       },
       showInquireOrder(){
         this.isShowInquireOrderDialog = true
         this.orderForm = {
           token: this.userToken,
           shopId: '',
           tbNameOrOrderNo: ''
         }
         this.orderTableData =  []
       },
       inquireOrder(){
         if(!this.orderForm.tbNameOrOrderNo){
           this.$message.error('请输入订单号/买家淘宝号');
           return
         }
         if(!this.orderForm.shopId){
           this.$message.error('请输入店铺名称');
           return
         }
         this.$loading.show('查询中')
         apiQueryOrder(this.orderForm).then(res =>{
           setTimeout(() => {
             this.$loading.hide()
           }, 500);
            if (res.code == 1){
              this.orderTableData = res.msg
              var date = new Date(res.expires * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
              this.expires = this.getFormatTime(date)
            } else {
              this.$message.error(res.msg);
            }
         }).catch(res => {
             this.$message.error(res.msg)
         })
       },
       openAppealOrder(row){
         this.appealForm = {
           token: this.userToken,
           task_type: 1,
           type: 1,
           order_num: row.order_num ? row.order_num : '',
           tb_name: row.tb_name,
           push_id: row.push_id,
           task_code: row.task_code,
           content: '',
           treat_content: '',
           proof_img_url: '',
           appeal_why: ''
         }
         this.showAppealDialog = true
       },
       closeAppealDialog(){
         this.showAppealDialog = false
       },
       confrimAppeal(){
         this.$message.success('申诉成功，请在申诉工单处查看');
         this.getTableData()
         this.showAppealDialog = false
       },
       getEntranceType(row){
         return this.entranceType[row.entrance_type]
       },
       getShopType(row){
         return this.platformNameObject[row.platform_type]
       },
       getCheckType (row) {
         if (row.check_status == 4 && row.status == 6) {
           return true
         } else{
           return false
         }
       },
       searchData(){
         this.searchForm.page = 1
         this.searchForm.pageSize = 10
         this.getTableData()
       },
       resetSearchParam(){
        this.searchForm = {
           token: this.userToken,
           page: 1,
           pageSize: 10,
           shopId: '',
           productId: '',
           planCode: '',
           taskCode: '',
           startTime: '',
           endTime: '',
           account: '',
           payMoney: '',
           shopType: this.platformType
         }
       },
       handleSizeChange(val) {
       	this.searchForm.pageSize = val;
       	this.getTableData()
       },
       handleCurrentChange(val) {
       	this.searchForm.page = val;
       	this.getTableData()
       },
       changeOverTimeType(row) {
         if (row.over_time == 0 || row.over_time == '' || row.over_time == null) {
           return '--'
         }
        if (typeof(row.over_time) != 'number') {
          return row.over_time
        }
         var date = new Date(row.over_time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
         return this.getFormatTime(date)
       },
       getFormatTime (date){
          var Y = date.getFullYear() + '-';
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          var D = (date.getDate() < 10 ? '0' +  date.getDate() : date.getDate()) + ' ';
          var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
          var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
          var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
          return Y + M + D + h + m + s;
       },
       changeTime(val){
        if (this.searchTime == null) {
          this.searchForm.startTime =  ''
          this.searchForm.endTime =  ''
        } else{
          this.searchForm.startTime =  this.changeTimeType(val[0])
          this.searchForm.endTime =  this.changeTimeType(val[1])
        }
       },
       changeTimeType(time){
         var d = new Date(time);
         var s = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
         return new Date(s).getTime() /1000;
       },
       toPlanDetailPage(id, item){
         this.$router.push(`/plan/salesPlanDetail?id=${id}&shop_type=${item.platform_type}&status=${item.customize_whether}`);
       },
       getAllTableData(){
         let data = JSON.parse(JSON.stringify(this.searchForm))
         data.page = 1
         data.pageSize = this.pageToatal
         if (data.pageSize == 0) {
            this.$message.error('当前表格没有数据可以导出');
            return
         }
         return new Promise ((resolve) =>{
           this.$isClick(true);
           apiNotCheckSaleTaskList(data).then(res =>{
             this.$isClick(false);
              if (res.code == 1){
                 this.allTableData = res.msg.res
                resolve(res) ;
              } else {
                this.$message.error(res.msg);
              }
           }).catch(res => {
             this.$isClick(false);
               this.$message.error(res.msg)
           })
         })

       },
       downloadExcel(){
         this.$loading.show('下载中')
         var wb = ''
          var xlsxParam = { raw: true }
          this.getAllTableData().then(()=>{
          wb = this.XLSX.utils.table_to_book(document.querySelector('#exportTable'),xlsxParam)
          var wbout = this.XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
          try {
            this.FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }),'销量未审核订单.xlsx')
          } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
          setTimeout(() => {
            this.$loading.hide()
            this.$message.success('下载完成')
          }, 1000);
          return wbout
         })
       }
    }
  }
</script>

<style lang="less">
  #sales-wait-check-order{
    .table-box {
      .table-header-box {
        .tips {
          color: red;
          text-align: right;
          margin: 10px 0;
        }
        .search-btn {
          background: #f16f6f;
          color: #fff;
          padding: 8px 15px!important;
        }
      }
      .check-btn {
        background: @themeColor;
        color: #fff;
        padding: 8px 15px!important;
      }
      .appeal-btn {
        background: red;
        color: #fff;
        padding: 8px 27px!important;
        margin-left: 0!important;
      }
    }
    .check-dialog {
      .order-info {
        .pay-money {
          span {
            display: inline-block;
            vertical-align: top;
          }
          img {
            width: 150px;
            height: 200px;
          }
        }
        .opt-box {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px dashed @themeColor;
          .tips {
            color: red;
            margin: 10px 0 16px 0;
          }
          .el-form-item {
            display: block;
            .el-input {
              width: 220px;
            }
            .el-form-item__label {
              width: 75px;
            }
            .textarea {
              width: 350px;
            }
          }
        }
      }
    }
    .inquire-order-dialog {
      .filter-btn {
        background: @themeColor;
        color: #fff;
        padding: 8px 15px !important;
      }
    }
  }
  .el-popover {
    .goods-preview-img,.keyword-preview-img {
      width: 200px;
      height: 200px;
    }
    .pay-money-preview-img {
      width: 700px;
      height: 800px;
    }
  }
</style>
